<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .test {
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: green transparent transparent transparent;
        transition: background-color 1s ease-in-out, transform 0.5s linear;
      }
      .test:hover {
        width: 20px;
        height: 20px;
        background-color: red;
        border: 0;
        transform: rotate(60deg) scale(1.5);
      }
      .test2 {
        width: 15px;
        height: 15px;
        background-color: green;
        animation: 1s ease-in-out 2s test infinite;
        animation-direction: alternate;
      }
      .test-wrapper {
        display: flex;
      }
      .test3 {
        width: 20px;
        height: 20px;
        background-color: aqua;
        clip-path: circle(50% at right center);
      }
      .test3-2 {
        /*  ellipse */
        width: 20px;
        height: 20px;
        background-color: rgb(14, 142, 142);
        border: 1px dashed gray;
        clip-path: ellipse(10px 5px at center center);
      }
      .test3-3 {
        width: 20px;
        height: 20px;
        background-color: rgb(125, 198, 143);
        border: 1px dashed gray;
        clip-path: polygon(0 0, 50% 50%, 0 100%);
      }
      @keyframes test {
        from {
          background-color: green;
          width: 15px;
          height: 15px;
          border-radius: 15px;
        }
        to {
          background-color: antiquewhite;
          width: 15px;
          height: 25px;
          border-radius: 5px;
        }
      }
    </style>
  </head>
  <body>
    <div class="test-wrapper">
      <div class="test3" v-if="isEdit"></div>
      <div class="test3-2" v-if="isEdit"></div>
      <div class="test3-3" v-if="isEdit"></div>
      <div class="test" v-if="isEdit"></div>
      <div class="test2" v-if="isEdit"></div>
    </div>
  </body>
</html>
